<template>
  <div>
    <div class='head_top'>
      <slot name='logo'></slot>
      <slot name='search' ><i class="el-icon-search"></i></slot>
      <slot>
        <el-button size="small" icon="el-icon-arrow-left" v-if="goBack" @click="$router.go(-1)">返回</el-button>
      </slot>
      <router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' class="head_login loginIn">
        <svg class="user_avatar" v-if="userInfo">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
        </svg>
        <el-button type="primary" round class="login_span" v-else>登录 | 注册</el-button>
      </router-link>
      <section class="title_head ellipsis" v-if="headTitle">
        <span class="title_text">{{headTitle}}</span>
      </section>
      <slot name="edit"></slot>
      <slot name="msite-title"></slot>
      <slot name="changeCity"></slot>
      <slot name="changeLogin"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  components: {
  }
})
export default class headCom extends Vue {
  @Prop() signinUp : string | undefined
  @Prop() headTitle : string | undefined
  @Prop() goBack : boolean | undefined
  get userInfo(){
    return this.$store.state.userInfo;
  }
}
</script>

<style lang="less" scoped>
h1 {
  margin: 10px 10px;
}
a{
  text-decoration: none;
}
.head_top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin: 20px 0;
}
.loginIn{

}
</style>

